<template>
  <div class="details-box buy-details">
    <div class="swipe-box">
      <div class="back-btn" @click="$router.back(-1)">
        <img src="../../../static/back_detail.png" alt="">
      </div>
      <mt-swipe :show-indicators="false" @change="swipeChange" :auto="0">
        <mt-swipe-item  v-for="(item,index) in banners" :key="index" >
          <img v-lazy="item.photoUrl" :style="defaultImage">
        </mt-swipe-item>
      </mt-swipe>
      <div class="swipe-span-box"><span class="swipe-span">{{swipeIndex}}/{{swipeSize}}</span></div>
    </div>
    <!--Title-->
    <div class="container-buy buy-titles" style="margin-top:8px;">
      <div class="title-items-box">
      <div class="item" v-if="this.burmeseTitle || this.englishTitle">
        <span class="item-right">{{ $i18n.locale == 'MM'
                ? translateUTZaw(this.burmeseTitle) : translateUTZaw(this.englishTitle)}}</span>
      </div>
      <div class="item" v-if="this.propertyName || this.street">
        <span class="item-right" v-if="this.propertyName">{{translateUTZaw(this.propertyName)}}</span><span
              class="item-right" v-if="this.street">,{{translateUTZaw(this.street)}}</span>
      </div>
      <div class="item" v-if="this.townshipId || this.regionId">
        <span class="item-right" v-if="this.townshipId">{{getTownshipItem(townshipId)}}</span><span
              class="item-right" v-if="this.regionId">,{{getRegionItem(regionId)}}</span>
      </div>
      </div>
      <div class="item title-items-box" style="text-align:center;" v-if="propertyTypeId != 4">
        <span class="item-right price-currency">{{this.masterBedrooms}}</span><span class="room-txt">{{$t('m.Master')}} {{$t('m.Bedroom')}}</span>
        <span class="item-right price-currency">{{this.bedrooms}}</span><span class="room-txt">{{$t('m.Bedroom')}}</span>
        <span class="item-right price-currency">{{this.bathrooms}}</span><span class="room-txt">{{$t('m.Bathroom')}}</span>
      </div>
      <div class="price-size">
        <!--Price-->
        <div class="price-size-item" v-if="this.usdPrice || this.mmkPrice">
          <div class="item-title">{{$t('m.Price')}}</div>
          <div class="" v-if="this.usdPrice">
            <div class="price-currency item-middle">{{regexNum(this.usdPrice)}}&nbsp;USD</div>
            <div class="" v-if="this.mmkPrice">({{regexNum(this.mmkPrice)}}&nbsp;Lks)</div>
          </div>
          <div class="" v-else-if="this.mmkPrice">
            <div class="price-currency item-middle">{{regexNum(this.mmkPrice)}}&nbsp;Lks</div>
          </div>
          <div v-if="conditionTypeId">{{getConditionType(this.conditionTypeId)}}</div>
        </div>
        <!--Floor Size-->
        <div class="price-size-item" v-if="propertyTypeId != 4 && this.floorSize">
          <div class="item-title">{{$t('m.Floorsize')}}</div>
          <div class="price-currency item-middle">{{this.floorSize ? regexNum(this.floorSize) + ' Sqft ':''}}</div>
          <div>{{this.floorLength &&  this.floorWidth ? '('+regexNum(this.floorLength)+ ' x ' +regexNum(this.floorWidth) +')' : ''}}</div>
        </div>
        <!--Land Size-->
        <div class="price-size-item" v-if="propertyTypeId != 1 && propertyTypeId != 2 && this.landSize">
          <div class="item-title">{{$t('m.Landsize')}}</div>
          <div class="price-currency item-middle">{{this.landSize? regexNum(this.landSize) + ' Sqft ':''}}</div>
          <div>{{this.landLength && this.landWidth ? '('+regexNum(this.landLength)+ ' x ' +regexNum(this.landWidth) +')' : ''}}</div>
        </div>

      </div>
      <div class="container-box buydetails-title-box">
        <div class="item" v-if="this.transactionType == 1">
          <span class="item-left">{{$t('m.Pricesqft')}}</span>
          <span class="item-right">{{regexNum(this.priceSqft) + '  Lks/sqft'}}</span>
        </div>
        <div class="item" v-if="this.propertyTypeId!=null || this.propertySubTypeId!=null">
          <span class="item-left">{{$t('m.Type')}}</span>
          <span class="item-right">{{getPropertyTypeItem(this.propertyTypeId)}}/{{getPropertySubTypeItem(this.propertySubTypeId)}}</span>
        </div>
        <div class="item" v-if="this.transactionType">
          <span class="item-left">{{$t('m.ListingType')}}</span>
          <span class="item-right">{{this.transactionType == 2 ? $t('m.rent') : $t('m.sale')}}</span>
        </div>
        <div class="item" v-if="propertyTypeId != 4 && this.furnishingId != null">
          <span class="item-left">{{$t('m.Furnishing')}}</span>
          <span class="item-right">{{getFurnishingItem(this.furnishingId)}}</span>
        </div>
        <div class="item" v-if="propertyTypeId != 4 && this.buildYear">
          <span class="item-left">{{$t('m.Built')}}</span>
          <span class="item-right">{{this.buildYear}}</span>
        </div>
        <div class="item" v-if="this.floorNo">
          <span class="item-left">{{$t('m.FloorNumber')}}</span>
          <span class="item-right">{{floorTranslate(this.floorNo)}}</span>
        </div>
        <div class="item" v-if="this.totalFloor">
          <span class="item-left">{{$t('m.TotalFloor')}}</span>
          <span class="item-right">{{this.totalFloor}}</span>
        </div>
        <div class="item" v-if="propertyTypeId != 4 && this.facingId != null">
          <span class="item-left">{{$t('m.Facing')}}</span>
          <span class="item-right">{{getFacingIdItem(this.facingId)}}</span>
        </div>
        <div class="item" v-if="this.Listed">
          <span class="item-left">{{$t('m.Listed')}}</span>
          <span class="item-right">{{this.dateFormat(this.Listed)}}</span>
        </div>
        <div class="item" v-if="this.listingId">
          <span class="item-left">{{$t('m.ListingID')}}</span>
          <span class="item-right">{{this.listingId}}</span>
        </div>
      </div>
      <!--Indoor Features-->
      <div class="container-box border-top-10" v-if="indoorArr.length>0">
        <div class="title">{{$t('m.IndoorFeatures')}}</div>
        <div class="content">
          <div class="">
            <span class="icon-item item-checked margin-top-5" v-for="item in indoorArr"><i class="el-icon-check green-icon"></i>{{getIndoorArrItem(item)}}</span>
          </div>
        </div>
      </div>
      <!--Outdoor Features-->
      <div class="container-box border-top-10" v-if="outdoorArr.length>0">
        <div class="title">{{$t('m.OutdoorFeatures')}}</div>
        <div class="content">
          <div class="">
            <span class="icon-item item-checked margin-top-5" v-for="item in outdoorArr"><i class="el-icon-check green-icon"></i>{{getOutdoorArrItem(item)}}</span>
          </div>
        </div>
      </div>
      <!--Special Features-->
      <div class="container-box border-top-10" v-if="specialFeaturesTypeArr.length>0">
        <div class="title">{{$t('m.SpecialFeatures')}}</div>
        <div class="content">
          <div class="">
            <span class="icon-item item-checked margin-top-5" v-for="item in specialFeaturesTypeArr"><i class="el-icon-check green-icon"></i>{{getSpecialFeaturesArrItem(item)}}</span>
          </div>
        </div>
      </div>
      <!--Description-->
      <div class="container-box border-top-10" v-if="description">
        <div class="title">{{$t('m.Description')}}</div>
        <div class="content">
          <div class="">
            <p v-html='translateUTZaw(description)' class="description"></p>
          </div>
        </div>
      </div>
      <!--google-maps-->
      <div class="container-box border-top-10" v-if="showMap">
        <div class="title">{{$t('m.Location')}}</div>
        <div class="box-border"></div>
        <div class="content content-bottom">
          <div class="map-box">
            <div id='Map' :style="defaultImage"></div>
          </div>
        </div>
      </div>
      <!--phones-->
      <div v-if="this.phones">
        <div class="phone-box" @click="getPhone()">
          <img slot="icon" src="../../../static/phone3.png">
          <span>Phone</span>
        </div>
        <div class="zwf-phone"></div>
      </div>
      <mt-popup
        v-model="phonePopupVisible"
        popup-transition="popup-fade"
        style="width: 100%;overflow: auto;"
        :closeOnClickModal="true"
        position="bottom"
      >
        <div>
          <p class="phone-title">{{$t('m.Pleasesayyoufound')}}</p>
          <div v-for="item in phonesArr" class="phone-list">
            <div class="phone-info">{{item}}</div>
            <div class="phone-info phone-img"><a href="javascript:;" @click="phoneCall(item)"><img slot="icon" src="../../../static/help_phone.png"></a></div>
          </div>
          <div class="roomtype-btn-box">
            <mt-button class="reset-btn btn-item" @click="onCancelPhone" type="default">{{$t('m.Cancel')}}</mt-button>
          </div>
        </div>
      </mt-popup>
    </div>
  </div>
</template>

<script>
  import GoogleMapsLoader from 'google-maps'
  import { visitorInformation, contactCount} from '@/api/mgc_api'
  import Qs from 'qs'

  // 英文翻译
  import propertyType from '@/json/propertyType'
  import propertySubType from '@/json/propertySubType'
  import township from '@/json/township'
  import region from '@/json/region'
  import floorJson from '@/json/floor'
  import outdoorFeaturesTypeJson from '@/json/outdoorFeaturesType'
  import indoorFeaturesTypeJson from '@/json/indoorFeaturesType'
  import specialFeaturesTypeJson from '@/json/specialFeaturesType'
  import furnishingTypeJson from '@/json/furnishingType'
  import facingTypeJson from '@/json/facingType'
  // 缅甸文翻译
  import mm_propertyType from '@/mmJson/propertyType'
  import mm_propertySubType from '@/mmJson/propertySubType'
  import mm_township from '@/mmJson/township'
  import mm_region from '@/mmJson/region'
  import mm_floorJson from '@/mmJson/floor'
  import mm_outdoorFeaturesTypeJson from '@/mmJson/outdoorFeaturesType'
  import mm_indoorFeaturesTypeJson from '@/mmJson/indoorFeaturesType'
  import mm_specialFeaturesTypeJson from '@/mmJson/specialFeaturesType'
  import mm_furnishingTypeJson from '@/mmJson/furnishingType'
  import mm_facingTypeJson from '@/mmJson/facingType'
  // 缅甸unicode
  import mmu_propertyType from '@/mmUnicodeJson/propertyType'
  import mmu_propertySubType from '@/mmUnicodeJson/propertySubType'
  import mmu_township from '@/mmUnicodeJson/township'
  import mmu_region from '@/mmUnicodeJson/region'
  import mmu_floorJson from '@/mmUnicodeJson/floor'
  import mmu_outdoorFeaturesTypeJson from '@/mmUnicodeJson/outdoorFeaturesType'
  import mmu_indoorFeaturesTypeJson from '@/mmUnicodeJson/indoorFeaturesType'
  import mmu_specialFeaturesTypeJson from '@/mmUnicodeJson/specialFeaturesType'
  import mmu_furnishingTypeJson from '@/mmUnicodeJson/furnishingType'
  import mmu_facingTypeJson from '@/mmUnicodeJson/facingType'
  export default {
    name: 'buyDetails',
    data () {
      return {
        // defaultHeadImg: 'this.src="' + require('../../../static/company.png') + '"',
        // defaultImg: 'this.src="' + require('../../../static/default.png') + '"',
        defaultImage: {
          backgroundImage: "url(" + require("../../../static/default.png") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "100% 100%",
        },
        phones:'',
        phonesArr:[],
        swipeIndex:1,
        swipeSize:1,
        uesrPhone: null,
        phoneIsHide: true,
        id:'',
        headInfo:{
          name: '',
          photo: '',
          phone: '',
          email: '',
        },
        banners: [],
        burmeseTitle: '',
        englishTitle: '',
        propertyName: '',
        street: '',
        townshipId: null,
        regionId: null,
        mmkPrice: '',
        usdPrice: '',
        masterBedrooms: null,
        bedrooms: null,
        bathrooms: null,
        floorSize: null,
        floorLength: null,
        floorWidth: null,
        landSize: null,
        landWidth: null,
        landLength: null,
        priceSqft: null,
        transactionType: null,
        furnishingId: null,
        propertyType: '',
        propertySubType: '',
        propertyTypeId: null,
        propertySubTypeId: null,
        conditionTypeId: null,
        buildYear: null,
        floorNo: null,
        totalFloor: null,
        facingId: null,
        Listed: null,// 上市日期 对应后台返回字段 updateDatetime
        listingId: null,
        indoorArr: [],
        outdoorArr: [],
        description: '',
        specialFeaturesTypeArr: [],
        //
        // banners: [
        //   {'photoId': 760, 'photoUrl': 'http://ads.bestproperty.com.mm/images/10/843ec535644af3b1e3958dee0bef26.jpg','orderNumber':1},
        //   {'photoId': 764, 'photoUrl': 'http://ads.bestproperty.com.mm/images/1b/4c47e9a1472507437bd3c3edd1b5eb.jpg','orderNumber':5}
        // ],

        // 房产类型 id匹配
        completionDate: '', // 完成时间
        construction: '', // 建筑完成情况

        // 上市id
        showMap: true,
        latlng: {lat: 202, lng: 100},
        //
        phonePopupVisible: false,
      }
    },
    computed: {
      townshipJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_township
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_township
        } else {
          return township
        }
      },
      regionJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_region
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_region
        } else {
          return region
        }
      },
      floorJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_floorJson
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_floorJson
        }  else {
          return floorJson
        }
      },
      indoorJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_indoorFeaturesTypeJson
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_indoorFeaturesTypeJson
        }  else {
          return indoorFeaturesTypeJson
        }
      },
      outdoorJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_outdoorFeaturesTypeJson
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_outdoorFeaturesTypeJson
        } else {
          return outdoorFeaturesTypeJson
        }
      },
      specialFeaturesTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_specialFeaturesTypeJson
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_specialFeaturesTypeJson
        } else {
          return specialFeaturesTypeJson
        }
      },
      facingTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_facingTypeJson
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_facingTypeJson
        } else {
          return facingTypeJson
        }
      },
      furnishingTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_furnishingTypeJson
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_furnishingTypeJson
        } else {
          return furnishingTypeJson
        }
      },
      propertyTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_propertyType
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_propertyType
        } else {
          return propertyType
        }
      },
      propertySubTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_propertySubType
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_propertySubType
        } else {
          return propertySubType
        }
      },
      conditionTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return [
            {"text": "ညွိႏွိဳင္း", "value": 1},
            {"text": "လာေရာက္ေဆြးေႏြးႏိုင္", "value": 2},
          ]
        }else {
          return [
            {"text": "Negotiable ", "value": 1},
            {"text": "View to Offer", "value": 2},
          ]
        }
      },
    },
    methods: {
      // translateTitle(){
      //   if(this.$i18n.locale == 'MM'){
      //     return this.burmeseTitle;
      //   }else if(this.$i18n.locale == 'MMU'){
      //     return this.$translateLang(this.burmeseTitle,'zawgyiTounicode')
      //   }else {
      //     return this.englishTitle;
      //   }
      // },
      // translateDescript(description){
      //   description = description || '';
      //   if(this.$i18n.locale == 'MM'){
      //     return description;
      //   }else if(this.$i18n.locale == 'MMU'){
      //     return this.$translateLang(description,'zawgyiTounicode')
      //   }else {
      //     return description;
      //   }
      // },
      // translateStreet(){
      //   if(this.$i18n.locale == 'MM'){
      //     return  this.street;
      //   }else if(this.$i18n.locale == 'MMU'){
      //     return this.$translateLang(this.street,'zawgyiTounicode')
      //   }else {
      //     return this.street;
      //   }
      // },
      // translatePropertyName(){
      //   if(this.$i18n.locale == 'MM'){
      //     return  this.propertyName;
      //   }else if(this.$i18n.locale == 'MMU'){
      //     return this.$translateLang(this.propertyName,'zawgyiTounicode')
      //   }else {
      //     return this.propertyName;
      //   }
      // },
      swipeChange (index) {
        this.swipeIndex = index + 1
      },
      // 上下两个组件同步索引
      PictureClick (index) {
        this.$refs.carousel_new.setActiveItem(index)
      },
      PictureClick_new (index) {
        this.$refs.carousel.setActiveItem(index)
      },
      geolocate () {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function (position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            }
            var circle = new window.mapsObj.googleObj.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            })
            window.mapsObj.autocomplete.setBounds(circle.getBounds())
          })
        }
      },
      getPhone () {
        this.phonesArr = this.phones.split(",")
        this.phonePopupVisible = true
      },
      phoneCall (item){
        if (item) {
          window.location.href = 'tel://' + item
        }
      },
      onCancelPhone () {
        this.phonePopupVisible = false
      },
      initMap (latlng) {
        this.isInitMap = true
        /* 初始化地图 */
        let map = new window.mapsObj.googleObj.maps.Map(document.getElementById('Map'), {
          center: latlng,
          scrollwheel: true,
          zoom: 11
        })
        this.latlng.lat = latlng.lat
        this.latlng.lng = latlng.lng
        /* 设置标记 */
        let marker = new window.mapsObj.googleObj.maps.Marker({
          map: map,
          draggable: true,
          animation: window.mapsObj.googleObj.maps.Animation.DROP,
          position: latlng
        })
        /* 拖动marker设置经纬度坐标 */
        window.mapsObj.googleObj.maps.event.addListener(marker, 'dragend', function (MouseEvent) {
          map.setCenter(MouseEvent.latLng)
          var lat = MouseEvent.latLng.lat()
          var lng = MouseEvent.latLng.lng()
          this.latlng.lat = lat
          this.latlng.lng = lng
        })
      },
      // 隐藏手机号码后几位
      hidePhone (phone) {
        if ( phone.length>0 ) {
          phone = phone.substring(0,4) + '****'
          this.uesrPhone = phone
          this.phoneIsHide = true
        }
      },
      showPhone () {
        this.uesrPhone = this.headInfo.phone
        this.phoneIsHide = false
        let id = this.id
        let data = {
          type: 1
        }
        let params = Qs.stringify(data)
        contactCount(id, params).then((res) => {
          if (res.data.data.errorID) {
            console.log(res.data.data.errorID)
          } else {
            console.log(res.data.data.errorID)
          }
        })
      },
      floorTranslate (floor) {
        let str = ''
        this.floorJson.forEach((item) => {
          if (item.value == floor) {
            str = item.text || ''
          }
        })
        return str
      },
      regexNum (v,len,split) {
        split = split || ',', len = Math.abs((+len) % 20 || 2)
        v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
        v = parseFloat(v) + ''
        return v.replace(/\d+/, function (v) {
            var lit = v.length % 3 == 0
            var index = lit ? v.length - 3 : -1
            return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
              return k + ((l == index && lit) ? '' : split)
            }).split('').reverse().join('')
          }
        )
      },
      // 时间格式化
      dateFormat (value, justMonth) {
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        var t
        if (justMonth) {
          t = m + '-' + Y
        } else {
          t = d + '-' + m + '-' + Y
        }
        return t
      },
      getTownshipItem (it) {
        let str = ''
        this.townshipJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getRegionItem (it) {
        let str = ''
        this.regionJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getPropertyTypeItem (it) {
        let str = ''
        this.propertyTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getPropertySubTypeItem (it) {
        let str = ''
        this.propertySubTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getFurnishingItem (it) {
        let str = ''
        this.furnishingTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getFacingIdItem (it) {
        let str = ''
        this.facingTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getIndoorArrItem (it) {
        let str = ''
        this.indoorJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getOutdoorArrItem (it) {
        let str = ''
        this.outdoorJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getSpecialFeaturesArrItem (it) {
        let str = ''
        this.specialFeaturesTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getConditionType (id) {
        let str = ''
        this.conditionTypeJson.forEach((item) => {
          if (item.value == id) {
            str = item.text || ''
          }
        })
        return str
      },
      getDetail (id) {
        visitorInformation(id).then((res) => {
          if (res.data.data.errorID === 0){
            let data = res.data.data.object
            // 详情页用户头部信息
            let headInfoData = data.userContact
            this.headInfo.photo = headInfoData.photo
            this.headInfo.name = headInfoData.name
            this.headInfo.phone = headInfoData.phone
            this.hidePhone(headInfoData.phone)
            this.headInfo.email = headInfoData.email
            this.banners = data.photoList
            // 如果没有图片的话展示默认图片
            if (this.banners.length == 0) {
              this.banners = [{photoUrl: '../static/default.png'}]
            }
            this.swipeSize = this.banners.length
            this.propertyName = data.propertyName
            this.street = data.street
            this.burmeseTitle = data.burmeseTitle
            this.englishTitle = data.englishTitle
            // 地址处理
            this.townshipId = data.townshipId
            this.regionId = data.regionId

            this.mmkPrice = data.mmkPrice
            this.usdPrice = data.usdPrice
            this.masterBedrooms = data.masterBedrooms
            this.bedrooms = data.bedrooms
            this.bathrooms = data.bathrooms
            this.floorSize = data.floorSize
            this.floorWidth = data.floorWidth
            this.floorLength = data.floorLength
            this.landSize = data.landSize
            this.landWidth = data.landWidth
            this.landLength = data.landLength
            this.conditionTypeId = data.conditionTypeId
            this.priceSqft = data.psf
            this.transactionType = data.transactionTypeId // 1 rent   2sale
            this.furnishingId = data.furnishingId
            // 房产种类
            this.propertyTypeId = data.propertyTypeId
            this.propertySubTypeId = data.propertySubTypeId

            this.buildYear = data.buildYear
            this.floorNo = data.floorNo
            this.totalFloor = data.totalFloor
            // 朝向
            this.facingId = data.facingId

            this.Listed = data.updateDatetime
            this.listingId = data.listingId
            // Indoor Features
            if (data.fittingList) {
              this.indoorArr = data.fittingList
            } else {
              this.indoorArr = []
            }

            // outdoor Features
            if (data.featureList) {
              this.outdoorArr = data.featureList
            } else {
              this.outdoorArr = []
            }

            // specialFeatures
            if (data.landscapeList) {
              this.specialFeaturesTypeArr = data.landscapeList
            } else {
              this.specialFeaturesTypeArr = []
            }

            // description
            let text = ''
            if (data.description != null) {
              text = data.description.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(new RegExp("\n", "gm"),'<br/>')
            }

            // this.description =  this.translateDescript(text)
            this.description =  text

            // 地图渲染
            let latlng = {
              lat: '',
              lng: ''
            }
            latlng.lat = data.latitude
            latlng.lng = data.longitude
            if (data.latitude) {
              this.showMap = true
              setTimeout(() => {
                this.initMap(latlng)
              }, 1500)
            } else {
              this.showMap = false
            }
            //  phones
            this.phones = data.userContact.phone
          }else {
            console.log('err')
          }

        })

      },
      translateUTZaw(str){
        if (!str) return '';
        return this.$translateLang(str, 'unicodeTozawgyi')
      },
    },
    mounted () {
      if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        console.log("https://bestproperty.com.mm/index.html" + window.location.hash, 'url的表示')
        window.open("https://bestproperty.com.mm/index.html" + window.location.hash);  //跳转到wap端的网址
        return;
      }
      /* Google Map Init */
      GoogleMapsLoader.KEY = 'AIzaSyD6fBhKRpK6KPw8pxwQAQDI3AyzViGIUOY'
      GoogleMapsLoader.VERSION = '3.14'
      GoogleMapsLoader.LIBRARIES = ['geometry', 'places']
      GoogleMapsLoader.load(function (google) {
        let geocoder = new google.maps.Geocoder()
        let googleObj = google
        let mapsObj = {autocomplete: '', geocoder: geocoder, googleObj: googleObj}
        window.mapsObj = mapsObj
      })

      // 页面跳转进来获取参数
      this.id = this.$route.query.id
      // this.id = 2154
      // 调用接口获取详情页面的数据
      this.getDetail(this.id)
      window.scrollTo(0, 0)
    }
  }
</script>

<style scoped>
  .mint-swipe{
    height:200px;
  }
  .mint-swipe .mint-swipe-item img{
    height:100%;
    width:100%;
    display: block;
  }

  .swipe-box{
    position: relative;
    text-align: center;
  }
  .swipe-span-box{
    position: absolute;
    bottom:10px;
    left:0;
    right:0;
  }
  .swipe-span{
    padding:2px 8px;
    background: rgba(0,0,0,.4);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    color:#fff;
  }
  .container-box {
    padding: 14px;
    text-align: left;
  }
  .item-left {
    min-width: 80px;
    margin-right: 10px;
    display: inline-block;
    color: #83888f;
    /*height: 24px;*/
    line-height: 24px;
  }
  .item-right {
    color: #0b0b0b;
    /*height: 24px;*/
    line-height: 24px;
  }
  .border-top-10{
    border-top: 10px solid rgb(242, 242, 242);
  }
  .title{
    font-size: 15px;
    color: #ef9f02;
    padding-bottom: 8px;
  }
  .price-currency {
    color: red;
  }
  .ps-right{
    float:right;
  }
  .room-item-color {
    color: #666;
  }
  .icon-box{
    height: 24px;
    line-height: 24px;
  }
  .icon-box p{
    margin:0;
  }
  .left-item{
    min-width: 38%;
    display: inline-block;
  }
  .item-checked{
    padding: 3px 6px;
    border: 1px solid #83888f;
    border-radius: 6px;
    margin-right: 5px;
    color: #83888f;
    display: inline-block;
  }
  .margin-top-5{
    margin-top:6px;
  }
  .map-box{
    height:200px;
    margin-bottom:5px;
  }
  .map-box #Map{
    height:100%;
  }
  .map-info{
    margin-bottom:5px;
  }
  .title-items-box{
    padding:0 14px;
    text-align: left;
  }
  .title-items-box span.item-right{
    margin-right:5px;
  }
  .title-items-box span.room-txt{
    margin-right:10px;
  }
  .price-size{
    display: flex;
    padding:10px 0;
    border-top:1px solid #d3d3d3;
    border-bottom:1px solid #d3d3d3;
    margin-top:5px;
  }
  .price-size-item{
    flex: 1;
    text-align: center;
    color:#83888f;
    border-right:1px solid #d3d3d3;
  }
  .price-size-item:last-child{
    border-right:none;
  }
  .item-title{
    color:#83888f;
  }
  .item-middle{
    font-size: 1.1em;
    margin:3px 0;
  }
  .buydetails-title-box .item{
    display: flex;
  }
  .buydetails-title-box .item span{
    display: block;
    flex:1;
    margin:0;
  }
  .description{
    margin:0;
    overflow: hidden;
    word-wrap: break-word;
  }
  /*.container-box:last-child{*/
    /*margin-bottom:10px;*/
  /*}*/
  .back-btn{
    position: absolute;
    top:10px;
    left:12px;
    width:32px;
    height: 32px;
    background: rgba(60,60,60,.2);
    z-index:99;
    padding:7px;
    border-radius: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .back-btn img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .phone-box{
    background: rgb(51, 204, 102);
    line-height: 0.18rem;
    height: 0.18rem;
    color:#fff;
    padding: .12rem;
    box-sizing: content-box;
    text-align: center;
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
  }
  .phone-box img,.phone-img img{
    height: 0.22rem;
    width: 0.22rem;
    vertical-align: middle;
  }
  .zwf-phone {
    padding: .21rem 0;
  }
  .phone-list{
    height: 0.22rem;
    Line-height: 0.22rem;
    text-align: left;
    padding: .12rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
  }
  .phone-title{
    padding:.15rem .12rem;
    margin:0;
    color:#ef9f02;
    border-bottom: 1px solid #f0f0f0;
  }
  .phone-info{
    flex: 1;
  }
  .phone-img{
    text-align: right;
  }
  .roomtype-btn-box{
    padding: .16rem;
    overflow: hidden;
    display: flex;
  }
  .roomtype-btn-box .btn-item{
    flex: 1;
  }
</style>
